import { CrudOptions, AddReq, DelReq, EditReq, dict, CrudExpose, UserPageQuery, CreateCrudOptionsRet} from '@fast-crud/fast-crud';
import _ from 'lodash-es';
import * as api from './api';
import { request } from '/@/utils/service';
import {auth} from "/@/utils/authFunction";


// 注释编号:django-vue3-admin-crud355117:代码开始行
// 功能说明:导入多选批量删除需求
import XEUtils from 'xe-utils';
import { nextTick, ref } from 'vue';

// 注释编号:django-vue3-admin-crud355117:代码结束行



//此处为crudOptions配置
export default function ({ crudExpose}: { crudExpose: CrudExpose}): CreateCrudOptionsRet {
	const pageRequest = async (query: any) => {
		return await api.GetList(query);
	};
	const editRequest = async ({ form, row }: EditReq) => {
		if (row.id) {  
			form.id = row.id;
		}
		return await api.UpdateObj(form);
	};
	const delRequest = async ({ row }: DelReq) => {
		return await api.DelObj(row.id);
	};
	const addRequest = async ({ form }: AddReq) => {
		return await api.AddObj(form);
	};

    const exportRequest = async (query: UserPageQuery) => {
		return await api.exportData(query)
	};

		
		// 注释编号:django-vue3-admin-crud402311:代码开始行
		// 功能说明:配置选中行的功能
		
		//记录选中的行
		const selectedRows = ref<any>([]);

		const onSelectionChange = (changed: any) => {
			const tableData = crudExpose.getTableData();
			const unChanged = tableData.filter((row: any) => !changed.includes(row));
			// 添加已选择的行
			XEUtils.arrayEach(changed, (item: any) => {
				const ids = XEUtils.pluck(selectedRows.value, 'id');
				if (!ids.includes(item.id)) {
					selectedRows.value = XEUtils.union(selectedRows.value, [item]);
				}
			});
			// 剔除未选择的行
			XEUtils.arrayEach(unChanged, (unItem: any) => {
				selectedRows.value = XEUtils.remove(selectedRows.value, (item: any) => item.id !== unItem.id);
			});
		};
		const toggleRowSelection = () => {
			// 多选后，回显默认勾选
			const tableRef = crudExpose.getBaseTableRef();
			const tableData = crudExpose.getTableData();
			const selected = XEUtils.filter(tableData, (item: any) => {
				const ids = XEUtils.pluck(selectedRows.value, 'id');
				return ids.includes(item.id);
			});
	
			nextTick(() => {
				XEUtils.arrayEach(selected, (item) => {
					tableRef.toggleRowSelection(item, true);
				});
			});
		};

		// 注释编号:django-vue3-admin-crud402311:代码结束行




	return {
		// 注释编号:django-vue3-admin-crud565217:代码开始行
		// 功能说明:这里要配置return，不然crudExpose获取不到
		selectedRows,
		toggleRowSelection,
		// 注释编号:django-vue3-admin-crud565217:代码结束行


		crudOptions: {
			request: {
				pageRequest,
				addRequest,
				editRequest,
				delRequest,
			},
			actionbar: {
				buttons: {
						export:{
                            // 注释编号:django-vue3-admin-crud210716:注意这个auth里面的值，最好是使用index.vue文件里面的name值并加上请求动作的单词
                            show: auth('CrudDemoModelViewSet:Export'),
							text:"导出",//按钮文字
							title:"导出",//鼠标停留显示的信息
                            click(){
                                return exportRequest(crudExpose.getSearchFormData())
								// return exportRequest(crudExpose!.getSearchFormData())    // 注意这个crudExpose!.getSearchFormData()，一些低版本的环境是需要添加!的
                            }
                        },
                        add: {
                            show: auth('CrudDemoModelViewSet:Create'),
                        },
				}
			},
            rowHandle: {
                //固定右侧
                fixed: 'right',
                width: 200,
                buttons: {
                    view: {
                        type: 'text',
						order: 1,
                        show: auth('CrudDemoModelViewSet:Retrieve')
                    },
                    edit: {
                        type: 'text',
						order: 2,
						show: auth('CrudDemoModelViewSet:Update')
                    },
					copy: {
                        type: 'text',
						order: 3,
						show: auth('CrudDemoModelViewSet:Copy')
                    },
                    remove: {
                        type: 'text',
						order: 4,
						show: auth('CrudDemoModelViewSet:Delete')
                    },
                },
            },
			table: {
				rowKey: 'id', //设置你的主键id， 默认rowKey=id
				onSelectionChange,
				onRefreshed: () => toggleRowSelection(),   // 注释编号:django-vue3-admin-crud255417:需要配置toggleRowSelection
			},
			columns: {
				// 注释编号:django-vue3-admin-crud260511:代码开始行
				// 功能说明:要配置出来$checked
				$checked: {
					title: "选择",
					form: { show: false },
					column: {
						type: "selection",
						align: 'center',
						width: '40px',  // 注释编号:django-vue3-admin-crud340311:这个宽度你要按照自己的页面为调整，不然会出现一个display: inline-flex，导致无法居中显示
						columnSetDisabled: true, //禁止在列设置中选择
					}
				},
				// 注释编号:django-vue3-admin-crud260511:代码结束行
				goods: {
					title: '商品',
					type: 'input',
					search: { show: true},
					column: {
						minWidth: 120,
						sortable: 'custom',
					},
					form: {
						helper: {
							render() {
								return <div style={"color:blue"}>商品是必需要填写的</div>;
								}
							},
						rules: [{ required: true, message: '商品名称必填' }],
						component: {
							placeholder: '请输入商品名称',
						},
					},
				},
                inventory: {
					title: '库存量',
					type: 'number',
					search: { show: false },
					column: {
						minWidth: 120,
						sortable: 'custom',
					},
					form: {
						rules: [{ required: true, message: '库存量必填' }],
						component: {
							placeholder: '请输入库存量',
						},
					},
				},

                goods_price: {
					title: '商品定价',
					type: 'text',
					search: { show: false },
					column: {
						minWidth: 120,
						sortable: 'custom',
					},
					form: {
						rules: [{ required: true, message: '商品定价必填' }],
						component: {
							placeholder: '请输入商品定价',
						},
					},
				},
                purchase_goods_date: {
                    title: '进货时间',
					type: 'date',
					search: { show: false },
                    form: {
                    // rules: [{ required: true, message: '进货时间必填' }],
                      component: {
                            //显示格式化
                            format: "YYYY-MM-DD",
                            //输入值格式
                            valueFormat: "YYYY-MM-DD",
                            placeholder: '请输入进货时间',
                      }
                    },
                    column: {
                      align: "center",
                      width: 120,
                      component: { name: "fs-date-format", format: "YYYY-MM-DD" }
                    }
                  },

			},
		},
	};
}
